<template>
  <div class="settings-page">
    <div class="container mx-auto px-4 py-8">
      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm">
        <!-- 页面标题 -->
        <div
          class="px-6 pt-6 border-b border-gray-100 dark:border-gray-800 pb-6"
        >
          <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              账号设置
            </h1>
            <el-button type="primary" @click="handleSaveAll"
              >保存所有更改</el-button
            >
          </div>
        </div>

        <!-- 设置内容区域 -->
        <div class="p-6">
          <!-- 基本信息卡片 -->
          <div class="setting-card mb-8">
            <div class="flex items-start">
              <!-- 基本信息表单 -->
              <div class="flex-1">
                <el-form
                  ref="profileForm"
                  :model="profileData"
                  :rules="profileRules"
                  label-position="top"
                >
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <el-form-item label="昵称" prop="nickname">
                      <el-input
                        v-model="profileData.nickname"
                        placeholder="请输入昵称"
                        maxlength="20"
                        show-word-limit
                      />
                    </el-form-item>

                    <el-form-item label="性别" prop="gender">
                      <el-select v-model="profileData.gender" class="w-full">
                        <el-option label="男" value="male" />
                        <el-option label="女" value="female" />
                        <el-option label="保密" value="other" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="生日" prop="birthday">
                      <el-date-picker
                        v-model="profileData.birthday"
                        type="date"
                        placeholder="选择生日"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        class="w-full"
                      />
                    </el-form-item>

                    <el-form-item label="所在地" prop="location">
                      <el-cascader
                        v-model="profileData.location"
                        :options="locationOptions"
                        placeholder="请选择所在地"
                        class="w-full"
                      />
                    </el-form-item>
                  </div>

                  <el-form-item label="个人简介" prop="bio">
                    <el-input
                      v-model="profileData.bio"
                      type="textarea"
                      :rows="3"
                      placeholder="介绍一下自己吧"
                      maxlength="200"
                      show-word-limit
                    />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <!-- 账号安全卡片 -->
          <div class="setting-card mb-8">
            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-6">
              账号安全
            </h2>
            <div class="space-y-6">
              <!-- 手机绑定 -->
              <div class="security-item">
                <div
                  class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
                >
                  <div class="flex items-center space-x-3">
                    <el-icon class="text-xl text-primary-500"
                      ><Phone
                    /></el-icon>
                    <div>
                      <div class="font-medium">手机绑定</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{
                          profileData.phone
                            ? maskPhone(profileData.phone)
                            : "未绑定手机号"
                        }}
                      </div>
                    </div>
                  </div>
                  <el-button link type="primary" @click="handleChangePhone">
                    {{ profileData.phone ? "修改" : "绑定" }}
                  </el-button>
                </div>
              </div>

              <!-- 邮箱绑定 -->
              <div class="security-item">
                <div
                  class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
                >
                  <div class="flex items-center space-x-3">
                    <el-icon class="text-xl text-primary-500"
                      ><Message
                    /></el-icon>
                    <div>
                      <div class="font-medium">邮箱绑定</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{
                          profileData.email
                            ? maskEmail(profileData.email)
                            : "未绑定邮箱"
                        }}
                      </div>
                    </div>
                  </div>
                  <el-button link type="primary" @click="handleChangeEmail">
                    {{ profileData.email ? "修改" : "绑定" }}
                  </el-button>
                </div>
              </div>

              <!-- 密码设置 -->
              <div class="security-item">
                <div
                  class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
                >
                  <div class="flex items-center space-x-3">
                    <el-icon class="text-xl text-primary-500"><Lock /></el-icon>
                    <div>
                      <div class="font-medium">登录密码</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">
                        建议定期更换密码，提高账号安全性
                      </div>
                    </div>
                  </div>
                  <el-button link type="primary" @click="handleChangePassword"
                    >修改</el-button
                  >
                </div>
              </div>

              <!-- 实名认证 -->
              <div class="security-item">
                <div
                  class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
                >
                  <div class="flex items-center space-x-3">
                    <el-icon class="text-xl text-primary-500"
                      ><UserFilled
                    /></el-icon>
                    <div>
                      <div class="font-medium">实名认证</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{
                          profileData.identityInfo
                            ? `已认证 - ${maskName(profileData.identityInfo.realName)}`
                            : "未认证"
                        }}
                      </div>
                    </div>
                  </div>
                  <el-button
                    link
                    :type="profileData.identityInfo ? 'info' : 'primary'"
                    @click="handleVerifyIdentity"
                  >
                    {{ profileData.identityInfo ? "查看" : "认证" }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 隐私设置卡片 -->
          <div class="setting-card mb-8">
            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-6">
              隐私设置
            </h2>
            <el-form :model="privacySettings" label-position="top">
              <div class="space-y-8">
                <!-- 个人资料可见性 -->
                <div class="privacy-item">
                  <h3
                    class="text-base font-medium text-gray-900 dark:text-white mb-4"
                  >
                    个人资料可见性
                  </h3>
                  <div class="space-y-4">
                    <el-form-item label="资料可见范围">
                      <el-radio-group
                        v-model="privacySettings.profileVisibility"
                        class="flex flex-wrap gap-4"
                      >
                        <el-radio label="public">
                          <div class="flex items-center space-x-2">
                            <el-icon><View /></el-icon>
                            <span>完全公开</span>
                          </div>
                        </el-radio>
                        <el-radio label="friends">
                          <div class="flex items-center space-x-2">
                            <el-icon><UserFilled /></el-icon>
                            <span>仅好友可见</span>
                          </div>
                        </el-radio>
                        <el-radio label="private">
                          <div class="flex items-center space-x-2">
                            <el-icon><Lock /></el-icon>
                            <span>仅自己可见</span>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="详细信息展示">
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <el-checkbox
                          v-model="privacySettings.profileDetails.showPhone"
                          >显示手机号码</el-checkbox
                        >
                        <el-checkbox
                          v-model="privacySettings.profileDetails.showEmail"
                          >显示邮箱地址</el-checkbox
                        >
                        <el-checkbox
                          v-model="privacySettings.profileDetails.showBirthday"
                          >显示生日信息</el-checkbox
                        >
                        <el-checkbox
                          v-model="privacySettings.profileDetails.showLocation"
                          >显示位置信息</el-checkbox
                        >
                      </div>
                    </el-form-item>
                  </div>
                </div>

                <!-- 社交互动设置 -->
                <div class="privacy-item">
                  <h3
                    class="text-base font-medium text-gray-900 dark:text-white mb-4"
                  >
                    社交互动设置
                  </h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <el-switch
                      v-model="privacySettings.socialInteraction.allowComments"
                      active-text="允许他人评论"
                    />
                    <el-switch
                      v-model="privacySettings.socialInteraction.allowMessages"
                      active-text="允许私信联系"
                    />
                    <el-switch
                      v-model="
                        privacySettings.socialInteraction.allowFriendRequests
                      "
                      active-text="允许好友申请"
                    />
                    <el-switch
                      v-model="
                        privacySettings.socialInteraction.showOnlineStatus
                      "
                      active-text="显示在线状态"
                    />
                  </div>
                </div>

                <!-- 通知设置 -->
                <div class="privacy-item">
                  <h3
                    class="text-base font-medium text-gray-900 dark:text-white mb-4"
                  >
                    通知设置
                  </h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <el-switch
                      v-model="privacySettings.notifications.email"
                      active-text="接收邮件通知"
                    />
                    <el-switch
                      v-model="privacySettings.notifications.push"
                      active-text="接收站内消息"
                    />
                    <el-switch
                      v-model="privacySettings.notifications.activity"
                      active-text="接收活动通知"
                    />
                    <el-switch
                      v-model="privacySettings.notifications.marketing"
                      active-text="接收营销信息"
                    />
                  </div>
                </div>

                <!-- 搜索可见性 -->
                <div class="privacy-item">
                  <h3
                    class="text-base font-medium text-gray-900 dark:text-white mb-4"
                  >
                    搜索可见性
                  </h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <el-switch
                      v-model="
                        privacySettings.searchVisibility.allowSearchByPhone
                      "
                      active-text="允许通过手机号搜索"
                    />
                    <el-switch
                      v-model="
                        privacySettings.searchVisibility.allowSearchByEmail
                      "
                      active-text="允许通过邮箱搜索"
                    />
                    <el-switch
                      v-model="
                        privacySettings.searchVisibility.showInRecommendations
                      "
                      active-text="在推荐中显示"
                    />
                  </div>
                </div>
              </div>
            </el-form>
          </div>

          <!-- 账号注销 -->
          <div class="setting-card">
            <div class="border-t border-gray-100 dark:border-gray-800 pt-6">
              <div class="flex items-center justify-between">
                <div>
                  <h3 class="text-base font-medium text-red-600">账号注销</h3>
                  <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    注销后，账号数据将被清除且无法恢复
                  </p>
                </div>
                <el-button type="danger" @click="handleDeleteAccount"
                  >注销账号</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
      <el-form ref="passwordForm" label-position="top">
        <el-form-item label="当前密码" required>
          <el-input
            type="password"
            v-model="passwordForm.oldPassword"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input
            type="password"
            v-model="passwordForm.newPassword"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认新密码" required>
          <el-input
            type="password"
            v-model="passwordForm.confirmPassword"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="handlePasswordSubmit"
          >确认修改</el-button
        >
      </template>
    </el-dialog>

    <el-dialog v-model="showPhoneDialog" title="修改手机号" width="400px">
      <el-form ref="phoneForm" label-position="top">
        <el-form-item label="当前手机号">
          <div class="text-gray-500">{{ maskPhone(profileData.phone) }}</div>
        </el-form-item>
        <el-form-item label="新手机号" required>
          <el-input v-model="phoneForm.newPhone" />
        </el-form-item>
        <el-form-item label="验证码" required>
          <div class="flex space-x-4">
            <el-input v-model="phoneForm.code" />
            <el-button @click="handleSendCode">获取验证码</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPhoneDialog = false">取消</el-button>
        <el-button type="primary" @click="handlePhoneSubmit"
          >确认修改</el-button
        >
      </template>
    </el-dialog>

    <el-dialog v-model="showEmailDialog" title="修改邮箱" width="400px">
      <el-form ref="emailForm" label-position="top">
        <el-form-item label="当前邮箱">
          <div class="text-gray-500">{{ maskEmail(profileData.email) }}</div>
        </el-form-item>
        <el-form-item label="新邮箱" required>
          <el-input v-model="emailForm.newEmail" />
        </el-form-item>
        <el-form-item label="验证码" required>
          <div class="flex space-x-4">
            <el-input v-model="emailForm.code" />
            <el-button @click="handleSendEmailCode">获取验证码</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEmailDialog = false">取消</el-button>
        <el-button type="primary" @click="handleEmailSubmit"
          >确认修改</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      v-model="showIdentityDialog"
      :title="profileData.identityInfo ? '实名认证信息' : '实名认证'"
      width="400px"
    >
      <template v-if="profileData.identityInfo">
        <div class="space-y-4">
          <div class="flex justify-between">
            <span class="text-gray-500">真实姓名</span>
            <span>{{ maskName(profileData.identityInfo.realName) }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">身份证号</span>
            <span>{{
              profileData.identityInfo.idCard.replace(
                /(\d{4})\d{10}(\d{4})/,
                "$1**********$2",
              )
            }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">认证时间</span>
            <span>{{ profileData.identityInfo.verifyTime }}</span>
          </div>
        </div>
      </template>
      <template v-else>
        <el-form ref="identityForm" label-position="top">
          <el-form-item label="真实姓名" required>
            <el-input v-model="identityForm.realName" />
          </el-form-item>
          <el-form-item label="身份证号" required>
            <el-input v-model="identityForm.idCard" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="showIdentityDialog = false">关闭</el-button>
        <el-button
          v-if="!profileData.identityInfo"
          type="primary"
          @click="handleIdentitySubmit"
        >
          提交认证
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Phone,
  Message,
  Lock,
  View,
  UserFilled,
} from "@element-plus/icons-vue";
import { 
  getUserProfile, 
  updateUserProfile, 
  updateUserPhone, 
  updateUserEmail, 
  updateUserPassword,
  sendPhoneCode,
  sendEmailCode,
} from "@/api/user";
import { regionData } from 'element-china-area-data';

// 表单数据
const profileData = reactive({
  avatar: "",
  nickname: "",
  gender: "",
  birthday: "",
  location: [],
  bio: "",
  phone: "",
  email: "",
  isVerified: false,
});

// 表单校验规则
const profileRules = {
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
  birthday: [{ required: true, message: "请选择生日", trigger: "change" }],
};

// 弹窗组件
const showPasswordDialog = ref(false);
const showPhoneDialog = ref(false);
const showEmailDialog = ref(false);
const showIdentityDialog = ref(false);

// 测试数据
const testData = {
  avatar: "https://example.com/avatar.jpg",
  nickname: "快乐旅行者",
  gender: "male",
  birthday: "1990-01-01",
  location: ["44", "4403", "440304"], // 广东省深圳市福田区的编码示例
  bio: "热爱旅行，喜欢探索新地方的文化和美食。",
  phone: "13800138000",
  email: "traveler@example.com",
  isVerified: true,
  identityInfo: {
    realName: "张三",
    idCard: "450800199001011234",
    verifyTime: "2024-01-01 12:00:00",
  },
};

// 地区数据
const locationOptions = ref(regionData);

// 初始化数据
onMounted(async () => {
  try {
    // 获取用户个人资料
    const response = await getUserProfile();
    console.log("获取到的原始响应:", response);
    
    // 正确提取响应中的data属性
    const userProfile = response && response.data ? response.data : response;
    console.log("提取的用户数据:", userProfile);
    
    if (userProfile) {
      // 处理可能为null的字段，设置默认值
      const processedProfile = {
        ...userProfile,
        avatar: userProfile.avatar || "",
        nickname: userProfile.nickname || "",
        gender: userProfile.gender || "unknown",
        birthday: userProfile.birthday || "",
        location: userProfile.location ? 
          (typeof userProfile.location === 'string' ? JSON.parse(userProfile.location) : userProfile.location) : 
          [],
        bio: userProfile.bio || "",
        phone: userProfile.phone || "",
        email: userProfile.email || "",
        identityInfo: userProfile.realNameVerified ? {
          realName: userProfile.realName || "未知",
          idCard: "**************", // 安全考虑默认不返回完整身份证
          verifyTime: "已认证"
        } : null
      };
      
      Object.assign(profileData, processedProfile);
      console.log("处理后的用户资料:", profileData);
    } else {
      // 如果没有获取到数据，使用测试数据
      Object.assign(profileData, testData);
    }
  } catch (error) {
    console.error("获取用户数据失败:", error);
    // 使用测试数据作为后备
    Object.assign(profileData, testData);
  }
});

// 隐私设置数据扩展
const privacySettings = reactive({
  profileVisibility: "public",
  profileDetails: {
    showPhone: false,
    showEmail: false,
    showBirthday: true,
    showLocation: true,
  },
  socialInteraction: {
    allowComments: true,
    allowMessages: true,
    allowFriendRequests: true,
    showOnlineStatus: true,
  },
  notifications: {
    email: true,
    push: true,
    activity: true,
    marketing: false,
  },
  searchVisibility: {
    allowSearchByPhone: false,
    allowSearchByEmail: false,
    showInRecommendations: true,
  },
});

// 工具函数
const maskPhone = (phone) => {
  return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : "";
};

const maskEmail = (email) => {
  if (!email) return "";
  const [username, domain] = email.split("@");
  return `${username.charAt(0)}****@${domain}`;
};

const maskName = (name) => {
  if (!name) return "";
  return name.charAt(0) + "*".repeat(name.length - 1);
};

// 表单操作
const profileForm = ref(null);

const handleSaveAll = async () => {
  try {
    await profileForm.value.validate();
    
    // 准备提交数据
    const profileFormData = {
      nickname: profileData.nickname || "",
      gender: profileData.gender || "unknown",
      birthday: profileData.birthday || null,
      location: Array.isArray(profileData.location) && profileData.location.length > 0 ? 
                JSON.stringify(profileData.location) : null, // 转换为JSON字符串
      bio: profileData.bio || ""
    };
    
    console.log("准备提交的用户资料:", profileFormData);
    
    // 调用API保存用户资料
    const response = await updateUserProfile(profileFormData);
    console.log("更新用户资料响应:", response);
    ElMessage.success("保存成功");
    
    // 刷新用户资料
    const refreshResponse = await getUserProfile();
    const refreshUserProfile = refreshResponse && refreshResponse.data ? refreshResponse.data : refreshResponse;
    
    if (refreshUserProfile) {
      // 处理可能为null的字段，设置默认值
      const processedProfile = {
        ...refreshUserProfile,
        avatar: refreshUserProfile.avatar || "",
        nickname: refreshUserProfile.nickname || "",
        gender: refreshUserProfile.gender || "unknown",
        birthday: refreshUserProfile.birthday || "",
        location: refreshUserProfile.location ? 
          (typeof refreshUserProfile.location === 'string' ? 
            JSON.parse(refreshUserProfile.location) : refreshUserProfile.location) : 
          [],
        bio: refreshUserProfile.bio || "",
        phone: refreshUserProfile.phone || "",
        email: refreshUserProfile.email || ""
      };
      
      Object.assign(profileData, processedProfile);
      console.log("更新后的用户资料:", profileData);
    }
  } catch (error) {
    console.error("保存失败:", error);
    ElMessage.error(error.message || "请检查表单填写是否正确");
  }
};

// 安全相关操作
const handleChangePhone = () => {
  showPhoneDialog.value = true;
};

const handleChangeEmail = () => {
  showEmailDialog.value = true;
};

const handleChangePassword = () => {
  showPasswordDialog.value = true;
};

const handleVerifyIdentity = () => {
  showIdentityDialog.value = true;
};

const handleDeleteAccount = async () => {
  try {
    await ElMessageBox.confirm(
      "注销账号后，所有数据将被清除且无法恢复。确定要注销账号吗？",
      "警告",
      {
        confirmButtonText: "确定注销",
        cancelButtonText: "取消",
        type: "warning",
      },
    );
    // TODO: 调用注销账号API
    ElMessage.success("账号已注销");
  } catch {
    // 用户取消操作
  }
};

// 表单数据
const passwordForm = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const phoneForm = reactive({
  newPhone: "",
  code: "",
});

const emailForm = reactive({
  newEmail: "",
  code: "",
});

const identityForm = reactive({
  realName: "",
  idCard: "",
});

// 处理函数
const handlePasswordSubmit = async () => {
  if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    return ElMessage.warning("请填写完整信息");
  }
  
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    return ElMessage.warning("两次输入的新密码不一致");
  }
  
  try {
    await updateUserPassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword
    });
    
    showPasswordDialog.value = false;
    ElMessage.success("密码修改成功");
    
    // 清空表单
    passwordForm.oldPassword = "";
    passwordForm.newPassword = "";
    passwordForm.confirmPassword = "";
  } catch (error) {
    ElMessage.error(error.message || "密码修改失败");
  }
};

const handlePhoneSubmit = async () => {
  if (!phoneForm.newPhone || !phoneForm.code) {
    return ElMessage.warning("请填写完整信息");
  }
  
  try {
    await updateUserPhone({
      newPhone: phoneForm.newPhone,
      code: phoneForm.code
    });
    
    // 更新显示
    profileData.phone = phoneForm.newPhone;
    showPhoneDialog.value = false;
    ElMessage.success("手机号修改成功");
    
    // 清空表单
    phoneForm.newPhone = "";
    phoneForm.code = "";
  } catch (error) {
    ElMessage.error(error.message || "手机号修改失败");
  }
};

const handleEmailSubmit = async () => {
  if (!emailForm.newEmail || !emailForm.code) {
    return ElMessage.warning("请填写完整信息");
  }
  
  try {
    await updateUserEmail({
      newEmail: emailForm.newEmail,
      code: emailForm.code
    });
    
    // 更新显示
    profileData.email = emailForm.newEmail;
    showEmailDialog.value = false;
    ElMessage.success("邮箱修改成功");
    
    // 清空表单
    emailForm.newEmail = "";
    emailForm.code = "";
  } catch (error) {
    ElMessage.error(error.message || "邮箱修改失败");
  }
};

const handleIdentitySubmit = async () => {
  // TODO: 实现实名认证提交逻辑
  showIdentityDialog.value = false;
  ElMessage.success("实名认证提交成功，请等待审核");
};

const handleSendCode = async () => {
  if (!phoneForm.newPhone) {
    return ElMessage.warning("请输入手机号");
  }
  
  try {
    await sendPhoneCode(phoneForm.newPhone);
    ElMessage.success("验证码已发送");
  } catch (error) {
    ElMessage.error(error.message || "验证码发送失败");
  }
};

const handleSendEmailCode = async () => {
  if (!emailForm.newEmail) {
    return ElMessage.warning("请输入邮箱");
  }
  
  try {
    await sendEmailCode(emailForm.newEmail);
    ElMessage.success("验证码已发送");
  } catch (error) {
    ElMessage.error(error.message || "验证码发送失败");
  }
};
</script>

<style lang="scss" scoped>
.settings-page {
  .setting-card {
    @apply bg-white dark:bg-gray-900 rounded-lg;
  }

  :deep(.el-form-item__label) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-form-item__content) {
    @apply text-gray-900 dark:text-gray-100;
  }

  :deep(.el-input__inner) {
    @apply text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800;
  }

  :deep(.el-select__input) {
    @apply text-gray-900 dark:text-gray-100;
  }

  :deep(.el-select-dropdown__item) {
    @apply text-gray-900 dark:text-gray-100;
  }

  :deep(.el-radio__label) {
    @apply text-gray-900 dark:text-gray-100;
  }

  :deep(.el-checkbox__label) {
    @apply text-gray-900 dark:text-gray-100;
  }

  .security-item,
  .privacy-item {
    @apply transition-all duration-200;

    &:hover {
      @apply transform scale-[1.01];
    }

    .font-medium {
      @apply text-gray-900 dark:text-gray-100;
    }

    .text-sm {
      @apply text-gray-500 dark:text-gray-400;
    }
  }

  :deep(.el-switch) {
    @apply block;
  }

  :deep(.el-radio-group) {
    .el-radio {
      @apply mb-2;
    }
  }

  :deep(.el-dialog) {
    @apply bg-white dark:bg-gray-900;

    .el-dialog__title {
      @apply text-gray-900 dark:text-gray-100;
    }

    .el-dialog__body {
      @apply text-gray-700 dark:text-gray-300;
    }
  }
}
</style>
